<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .outer{
            margin: 50px auto;
            text-align: center;
        }
        .font{
            font-size: 20px;
            margin: 20px;
            font-weight: bold;
        }
        button{
            font-size: 20px;
            margin: 10px;
        }
        img{
            width: 300px;
        }
        .img_list1{

            text-align: center;
        }

    </style>
    <script>
        document.addEventListener("DOMContentLoaded",()=>{
            const outer=document.getElementsByClassName("outer")[0]
            const imgs=document.getElementsByTagName("img")[0]
            const prev=document.getElementsByClassName("prev")[0]
            const next=document.getElementsByClassName("next")[0]
            const auto=document.getElementsByClassName("auto")[0]
            const stop=document.getElementsByClassName("stop")[0]

            imgs_src=[
                "../10_DOM/images/IMG_1.JPG",
                "../10_DOM/images/IMG_2.JPG",
                "../10_DOM/images/IMG_3.JPG",
                "../10_DOM/images/IMG_4.JPG",
                "../10_DOM/images/IMG_5.JPG",
            ]
            const p = outer.cloneNode(false)
            p.classList.add("font")
            let i = 0
            p.innerText=`总共${imgs_src.length}张图片,当前是第${i+1}张`
            outer.insertAdjacentElement("afterbegin",p)


            next.addEventListener("click",next_change=()=>{
                timer1&&clearTimeout(timer1)
                i++
                if(i>imgs_src.length-1){
                    i=0
                }
                imgs.src=imgs_src[i]    
                p.innerText=`总共${imgs_src.length}张图片,当前是第${i+1}张。`
            })


            prev.addEventListener("click",()=>{
                timer1&&clearTimeout(timer1)    
                i--
                if(i<0){
                    i=imgs_src.length-1
                }
                imgs.src=imgs_src[i]
                p.innerText=`总共${imgs_src.length}张图片,当前是第${i+1}张。`
            })
            
            let timer1

            auto.addEventListener("click",()=>{
                timer1&&clearTimeout(timer1)
                // 开启定时器，切换图片
                timer1=setTimeout(auto_change=()=>{
                        next_change()
                        timer1=setTimeout(auto_change,1000)
                    },1000)

            })

            stop.addEventListener("click",()=>{
                clearTimeout(timer1)
            })


        })
    </script>
</head>
<body>
    <div class="outer">

        <div class="img_list">
            <img src="../10_DOM/images/IMG_1.JPG" alt="juilet">
        </div>
        <div class="btn-wrapper">
            <button class="prev">上一张</button>
            <button class="auto">自动切换</button>
            <button class="stop">停止</button>
            <button class="next">下一张</button>

        </div>
    </div>
    <hr>

    <div class="img_list1" style="position: relative;">
        <p class="lable"></p>
        <img src="../10_DOM/images/IMG_1.JPG" alt="juilet">
    </div>
    <script>
        const img2=document.querySelector(".img_list1 img")
        const lable=document.querySelector(".img_list1 .lable")

        lable.style.position="absolute"
        lable.style.fontSize="25px"
        lable.style.color="red"
        lable.style.top="50%"
        lable.style.left="50%"
        
        let i=0
        setInterval(()=>{
            i++
            if(i>imgs_src.length-1){
                i=0
            }
            img2.src=imgs_src[i]
            lable.innerText=`${i+1}`
        },1000)
    </script>
</body>
</html>